<template>
  <div class="shoplist">
    <ul>
    	<li v-for="item in shoplist" :key="item.id">
			<img :src="item.src" alt="" >
			<div>
				<p>{{item.title}}</p>
				<p class="price">￥{{item.price}}</p>
				<p><button @click="add(item)">加入购物车</button></p>
			</div>
		</li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import {mapState} from 'vuex'
export default {
 name:'shoplist',
 // computed:{
	//  shoplist(){
	// 	 return this.$store.state.shoplist;
	//  }
 // }
computed:mapState(['shoplist']),
methods:{
	add(item){
		this.$store.commit('add',item);
	}
}
}
</script>
<style scoped>
	li{
		border-bottom: 1px dashed #ccc;
		position: relative;
	}
	li div{
		display: inline-block;
		position: absolute;
		top: 20px;
		line-height: 30px;
	}
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 5px 10px;
	}
	.price{
		color: #f00;
	}
	button{
		background-color: coral;
		border: none;
		color: white;
		padding: 5px;
	}
	.shoplist{
		padding-bottom: 50px;
	}
</style>
 